<template>
	<view class="container">
		<scroll-view v-if="storedCardList.length" scroll-y="true" class="scroll_y" @scrolltolower="scroll">
			<view class="card_item" @tap="stored_card_buy(item)" v-for="item in storedCardList" :key="item.id">
			<!-- 	<view class="left">
					<text>雀實好玩</text>
					<text style="margin-top: 30rpx;">儲值卡</text>
				</view>
				<view class="right">
					<text>實際金額${{item.money}}</text>
					<text style="margin-top: 30rpx;">購買價格${{item.available_money}}</text>
				</view> -->
				<view class="top">
					<text>{{item.title}}</text>
					<text>有效期至{{effectiveTime(item.end_time*1000)}}</text>
				</view>
				<view class="available">實際金額<text style="color: #FA533D;margin-left: 15rpx;">${{item.available_money}}</text></view>
				<view class="buy">購買金額<text style="font-weight: bold;margin-left: 15rpx;">${{item.money}}</text></view>
				
			</view>
			<view v-if="!flag" style="text-align: center;">已經到底啦~</view>
		</scroll-view>
		<view style="text-align: center;" v-else>暫無儲值卡</view>
	</view>
</template>

<script>
	import {
		getStoreCouponList
	} from '@/api/index.js'
	export default {
		data() {
			return {
				storedCardList: [],
				flag: true,
				page: 1,
				store_id: ''
			};
		},
		onLoad(option) {
			this.store_id = option.id
			getStoreCouponList({
				type: 3, // 1--優惠券  2--電子票券  3--儲值卡
				page: 1,
				store_id: option.id
			}).then(res => {
				console.log(res.data, "儲值卡")
				this.storedCardList = res.data
			})
		},
		methods: {
			stored_card_buy(item) {
				uni.navigateTo({
					url: `/pages/shop_details/stored_card_buy/stored_card_buy?details=${JSON.stringify(item)}`
				})
			},

			scroll() {
				// console.log("觸底")
				if (this.flag) {
					getStoreCouponList({
						type: 3, // 1--優惠券  2--電子票券  3--儲值卡
						page: ++this.page,
						store_id: this.store_id
					}).then(res => {
						console.log(res.data, "翻頁")
						// this.storedCardList = res.data
						if (res.data.length) {
							this.storedCardList = this.storedCardList.concat(res.data)
						} else {
							this.flag = false
						}
					})
				}
			},
			effectiveTime(num) {
				let time = new Date(num)
				let y = time.getFullYear()
				let m = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : "0" + (time.getMonth() + 1)
				let d = time.getDate() >= 10 ? time.getDate() : "0" + (time.getDate())
				return y + "/" + m + "/" + d
			},
		}
	}
</script>

<style lang="less">
	.container {
		padding: 30rpx;
		box-sizing: border-box;

		.scroll_y {
			height: 90vh;

			.card_item {
				width: 690rpx;
				height: 244rpx;
				background: linear-gradient(180deg, rgba(40, 193, 112, 0.82) 0%, rgba(38, 183, 106, 0.77) 56%, rgba(40, 193, 103, 0.41) 100%, rgba(20, 97, 56, 0.32) 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				box-sizing: border-box;
				color: #fff;
				
				// padding: 36rpx 43rpx 46rpx 32rpx;
				// font-size: 48rpx;
				// font-weight: bold;
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				
				margin-bottom: 34rpx;
				
				padding: 20rpx;

				.left,.right {
					display: flex;
					flex-direction: column;
				}
				.top{
					display: flex;
					justify-content: space-between;
				}
				.available{
					margin: 30rpx 0;
					font-size: 40rpx;
					font-weight: bold;
				}
				.buy{
					text-align: end;
				}
			}
		}
	}
</style>